import React from 'react';
import ReactTestUtils from 'react/lib/ReactTestUtils';
import ReactDOM from 'react-dom';

import DropdownButton from '../src/DropdownButton';
import DropdownMenu from '../src/DropdownMenu';
import MenuItem from '../src/MenuItem';

describe('DropdownButton', () => {

  const simpleDropdown = (
    <DropdownButton title='Simple Dropdown' id='test-id'>
      <MenuItem>Item 1</MenuItem>
      <MenuItem>Item 2</MenuItem>
      <MenuItem>Item 3</MenuItem>
      <MenuItem>Item 4</MenuItem>
    </DropdownButton>
  );

  it('renders title prop', () => {
    const instance = ReactTestUtils.renderIntoDocument(simpleDropdown);
    const buttonNode = ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'BUTTON');

    buttonNode.innerText.should.match(/Simple Dropdown/);
  });

  it('renders dropdown toggle button', () => {
    const instance = ReactTestUtils.renderIntoDocument(simpleDropdown);

    const buttonNode = ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'BUTTON');

    buttonNode.tagName.should.equal('BUTTON');
    buttonNode.className.should.match(/\bbtn[ $]/);
    buttonNode.className.should.match(/\bbtn-default\b/);
    buttonNode.className.should.match(/\bdropdown-toggle\b/);
    buttonNode.getAttribute('type').should.equal('button');
    buttonNode.getAttribute('aria-expanded').should.equal('false');
    buttonNode.getAttribute('id').should.be.ok;
  });

  it('renders single MenuItem child', () => {
    const instance = ReactTestUtils.renderIntoDocument(
      <DropdownButton title='Single child' id='test-id'>
        <MenuItem>Item 1</MenuItem>
      </DropdownButton>
    );

    const menuNode = ReactDOM.findDOMNode(
      ReactTestUtils.findRenderedComponentWithType(instance, DropdownMenu));

    expect(menuNode.children.length).to.equal(1);
  });


  it('forwards pullRight to menu', () => {
    const instance = ReactTestUtils.renderIntoDocument(
      <DropdownButton pullRight title='blah' id='test-id'>
        <MenuItem>Item 1</MenuItem>
      </DropdownButton>
    );
    const menu = ReactTestUtils.findRenderedComponentWithType(instance, DropdownMenu);

    menu.props.pullRight.should.be.true;
  });

  it('renders bsSize', () => {
    const instance = ReactTestUtils.renderIntoDocument(
      <DropdownButton title='blah' bsSize='small' id='test-id'>
        <MenuItem>Item 1</MenuItem>
      </DropdownButton>
    );
    const node = ReactDOM.findDOMNode(instance);

    node.className.should.match(/\bbtn-group-sm\b/);
  });

  it('renders bsStyle', () => {
    const instance = ReactTestUtils.renderIntoDocument(
      <DropdownButton title='blah' bsStyle='success' id='test-id'>
        <MenuItem>Item 1</MenuItem>
      </DropdownButton>
    );
    const buttonNode = ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'BUTTON');

    buttonNode.className.should.match(/\bbtn-success\b/);
  });


  it('forwards onSelect handler to MenuItems', (done) => {
    const selectedEvents = [];

    const onSelect = (eventKey) => {
      selectedEvents.push(eventKey);

      if (selectedEvents.length === 4) {
        selectedEvents.should.eql(['1', '2', '3', '4']);
        done();
      }
    };
    const instance = ReactTestUtils.renderIntoDocument(
      <DropdownButton title='Simple Dropdown' onSelect={onSelect} id='test-id'>
        <MenuItem eventKey='1'>Item 1</MenuItem>
        <MenuItem eventKey='2'>Item 2</MenuItem>
        <MenuItem eventKey='3'>Item 3</MenuItem>
        <MenuItem eventKey='4'>Item 4</MenuItem>
      </DropdownButton>
    );

    const menuItems = ReactTestUtils.scryRenderedDOMComponentsWithTag(instance, 'A');

    menuItems.forEach(item => {
      ReactTestUtils.Simulate.click(item);
    });
  });

  it('closes when child MenuItem is selected', () => {
    const instance = ReactTestUtils.renderIntoDocument(
      <DropdownButton title='Simple Dropdown' id='test-id'>
        <MenuItem eventKey='1'>Item 1</MenuItem>
      </DropdownButton>
    );

    const node = ReactDOM.findDOMNode(instance);

    const buttonNode = ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'BUTTON');
    ReactTestUtils.Simulate.click(buttonNode);
    node.className.should.match(/\bopen\b/);

    const menuItem = ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'A');
    ReactTestUtils.Simulate.click(menuItem);
    node.className.should.not.match(/\bopen\b/);
  });

  it('does not close when onToggle is controlled', () => {
    const handleSelect = () => {};

    const instance = ReactTestUtils.renderIntoDocument(
      <DropdownButton title='Simple Dropdown' open={true} onToggle={handleSelect} id='test-id'>
        <MenuItem eventKey='1'>Item 1</MenuItem>
      </DropdownButton>
    );

    const node = ReactDOM.findDOMNode(instance);
    const buttonNode = ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'BUTTON');

    const menuItem = ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'A');

    ReactTestUtils.Simulate.click(buttonNode);
    node.className.should.match(/\bopen\b/);
    ReactTestUtils.Simulate.click(menuItem);

    node.className.should.match(/\bopen\b/);
  });

  it('Should pass props to button', () => {
    const instance = ReactTestUtils.renderIntoDocument(
      <DropdownButton title="Title" bsStyle="primary" id="testId" disabled>
        <MenuItem eventKey="1">MenuItem 1 content</MenuItem>
        <MenuItem eventKey="2">MenuItem 2 content</MenuItem>
      </DropdownButton>
    );

    const buttonNode = ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'BUTTON');

    assert.ok(buttonNode.className.match(/\bbtn-primary\b/));
    assert.equal(buttonNode.getAttribute('id'), 'testId');
    assert.ok(buttonNode.disabled);
  });
});
